<template>
    <div>
      <template>
        <template>
          <Row style="margin-bottom: 20px">
            <Col span="4">
              <Input v-model="code" placeholder="请输入order_code"/>
            </Col>
            <Col span="4" offset="1">
              <Button type="primary" @click="getOrderList">搜索</Button>
            </Col>
          </Row>
        </template>
      </template>
      <template>
        <Table :columns="columns1" :data="data1">
          <template slot-scope="{ row }" slot="state">
            <strong v-if="row.state==='0'">待受理</strong>
            <strong v-if="row.state==='1'">处理中</strong>
            <strong v-if="row.state==='2'">成功办结</strong>
            <strong v-if="row.state==='3'">办结失败</strong>
            <strong v-if="row.state==='5'">调用不通过</strong>
            <strong v-if="row.state==='7'">待办结</strong>
            <strong v-if="row.state==='8'">转件待受理</strong>
            <strong v-if="row.state==='9'">待提报</strong>
            <strong v-if="row.state==='81'">转件处理中</strong>
            <strong v-if="row.state==='82'">转件待审核</strong>
          </template>
        </Table>
      </template>
      <template>
        <Table :columns="columns2" :data="data2">
        </Table>
      </template>
      <json-view v-if="dockingLogList.length > 0" slot="content" :data="dockingLogList" :deep="5"/>
      <Modal v-model="modal" title="删除原因" width="700" cancel-text="关闭"
        @on-ok="deleteOrder()" @on-cancel="modal = false" ok-text="确定" style="position:relative;">
        <Form ref="paramData" :model="paramData" >
          <Row class="item1">
            <Col span="5" class="ivu-form-item-label">删除原因:</Col>
            <Col span="14" class="ivu-form-item-content">
              <Input v-model="paramData.del_msg" placeholder=""></Input>
            </Col>
          </Row>
        </Form>
      </Modal>
      <Modal v-model="modal1" title="是否重新推送至政务系统？" width="700" cancel-text="关闭"
        @on-ok="updateSendAgain(paramData)" @on-cancel="modal1 = false" ok-text="确定" style="position:relative;">
      </Modal>
      <!-- <Collapse style="margin-top:20px">
          <div v-for="(item, index) in dockingLogList" :key="index">
          <Panel :name="index.toString()+'a'">
            {{item.create_time}}{{item.funcation_desc}}
            <json-view slot="content" :data="item" :deep="3"/>
          </Panel>
          </div>
      </Collapse> -->
<!--      api/as/csc/auditorder/getOrderByCode
getOrderByCode-->
    </div>
</template>

<script>
import { getOrderInfoBycodeForKefu, updateSendAgain, getKefuOrderProcessList } from '@/api/eventlist'
import { deleteOrderAndSaveLogTokefu } from '@/api/customer-service'
import jsonView from 'vue-json-views'

export default {
  name: 'index',
  components: {
    jsonView
  },
  data () {
    return {
      paramData: {},
      modal: false,
      modal1: false,
      code: '',
      columns1: [
        { title: '事项', key: 'title', width: 150 },
        { title: '业务编号', key: 'code', width: 150 },
        { title: '申请人', key: 'name', width: 80 },
        { title: '手机号', key: 'mobile', width: 115 },
        { title: '身份证', key: 'cardno', width: 160 },
        { title: '社区名称', key: 'notice_company', width: 160 },
        { title: '社区编码', key: 'company_code', width: 160 },
        { title: '状态', slot: 'state', width: 85, align: 'center' },
        { title: '申请时间', key: 'create_time', width: 140, align: 'center' },
        { title: '原因', key: 'reason', width: 200, align: 'center' },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          className: 'nopadding',
          minWidth: 100,
          fixed: 'right',
          render: (h, params) => {
            let abc = [h('Button', {
              props: {
                type: 'error',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.modal = true
                  this.paramData.code = params.row.code
                }
              }
            }, '删除')]
            return h('div', abc)
          }
        }
      ],
      columns2: [
        { title: '处理人名称', key: 'handle_byname', width: 150, align: 'center' },
        { title: '处理人', key: 'handle_by', width: 150, align: 'center' },
        { title: '处理时间', key: 'handle_time', width: 200, align: 'center' },
        { title: '受理社区编号', key: 'accept_company_code', width: 150, align: 'center' },
        { title: '受理社区名称', key: 'accept_company_name', width: 200, align: 'center' },
        { title: '操作附加信息', key: 'params', width: 200, align: 'center' },
        { title: '其他系统同步状态', key: 'sync_system', width: 85, align: 'center' },
        { title: '同步业务系统结果', key: 'sync_system_res', width: 200, align: 'center' },
        { title: '同步政务系统状态', key: 'sync_government', width: 85, align: 'center' },
        { title: '同步政务系统结果', key: 'sync_gov_result', width: 200, align: 'center' },
        { title: '同步营商时间', key: 'sync_gov_time', width: 200, align: 'center' },
        { title: '用时', key: 'used_time', width: 200, align: 'center' },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          className: 'nopadding',
          minWidth: 80,
          fixed: 'right',
          render: (h, params) => {
            if (params.row.sync_government === '2') {
              let abc = [h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.modal1 = true
                    this.paramData.id = params.row.id
                  }
                }
              }, '重新推送')]
              return h('div', abc)
            }
          }
        }
      ],
      data1: [],
      data2: [],
      dockingLogList: []
    }
  },
  methods: {
    getOrderList () {
      let data = {
        code: this.code
      }
      getOrderInfoBycodeForKefu(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data1 = []
          // console.log(ret.data.data)
          this.data1.push(ret.data.data)
          this.dockingLogList = []
          this.dockingLogList = ret.data.data.dockingLogList
          // var a = []
          for (var i = 0; i < this.dockingLogList.length; i++) {
            var item = this.dockingLogList[i]
            item.response_content = JSON.parse(item.response_content)
            var requset_content = item.requset_content.split('||')
            item.requset_content = JSON.parse(requset_content[0])
            item.Basic = requset_content[1]
            // item.requset_content = JSON.parse(item.requset_content)
          }
          // this.dockingLogList = a
          console.log(ret.data.data)
          return
        }
        this.data1 = []
      })
      this.getKefuOrderProcessList()
    },
    deleteOrder () { // 删除订单
      if (confirm('确定删除吗？请谨操作')) {
        deleteOrderAndSaveLogTokefu(this.paramData).then(ret => {
          if (ret.data.errcode === 0) {
            this.$Notice.success({ title: '成功', desc: '已成功删除订单' })
            this.getOrderList()
            return
          }
          this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
        })
      }
    },
    updateSendAgain (params) {
      let data = {
        id: params.id
      }
      updateSendAgain(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.$Notice.success({ title: '成功', desc: '已成功修改推送状态' })
          this.getOrderList()
          return
        }
        this.$Notice.error({ title: '失败', desc: ret.data.errmsg })
      })
    },
    getKefuOrderProcessList () {
      let data = {
        order_code: this.code
      }
      getKefuOrderProcessList(data).then(ret => {
        if (ret.data.errcode === 0) {
          this.data2 = ret.data.data
          return
        }
        this.data2 = []
      })
    }
  }

}
</script>

<style scoped>

</style>
